{% extends "base.html" %}

{% block title %}个人资料 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .profile-container {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        max-width: 900px;
        margin: 0 auto;
    }
    .profile-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2rem;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #e9ecef;
    }
    .profile-avatar {
        position: relative;
        width: 150px;
        height: 150px;
        flex-shrink: 0;
    }
    .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #f8f9fa;
    }
    .avatar-upload-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        padding: 0.5rem;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .profile-avatar:hover .avatar-upload-overlay {
        opacity: 1;
    }
    .avatar-upload-input {
        display: none;
    }
    .profile-info {
        flex: 1;
        min-width: 300px;
    }
    .profile-name {
        font-size: 1.75rem;
        font-weight: 700;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    .profile-email {
        color: #6c757d;
        margin-bottom: 1rem;
    }
    .profile-stats {
        display: flex;
        gap: 2rem;
    }
    .profile-stat {
        text-align: center;
    }
    .profile-stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #007bff;
    }
    .profile-stat-label {
        color: #6c757d;
        font-size: 0.875rem;
    }
    .profile-nav {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
        border-bottom: 1px solid #e9ecef;
    }
    .profile-tab {
        padding: 1rem 2rem;
        cursor: pointer;
        font-weight: 600;
        color: #6c757d;
        transition: all 0.2s;
        border-bottom: 3px solid transparent;
    }
    .profile-tab:hover {
        color: #007bff;
        background-color: #f8f9fa;
    }
    .profile-tab.active {
        color: #007bff;
        border-bottom-color: #007bff;
    }
    .profile-content {
        display: none;
    }
    .profile-content.active {
        display: block;
        animation: fadeIn 0.5s ease;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .form-group {
        margin-bottom: 1.5rem;
    }
    .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        display: block;
    }
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        font-size: 1rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .form-control:focus {
        border-color: #007bff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .form-text {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    .form-row {
        display: flex;
        gap: 1.5rem;
    }
    .form-col {
        flex: 1;
    }
    .btn {
        padding: 0.75rem 1.5rem;
        border-radius: 0.25rem;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.2s;
        cursor: pointer;
        border: none;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
    }
    .btn-primary:hover {
        background-color: #0056b3;
    }
    .btn-primary:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }
    .btn-secondary {
        background-color: #6c757d;
        color: white;
    }
    .btn-secondary:hover {
        background-color: #545b62;
    }
    .btn-outline-primary {
        background-color: transparent;
        color: #007bff;
        border: 1px solid #007bff;
    }
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
    .btn-danger {
        background-color: #dc3545;
        color: white;
    }
    .btn-danger:hover {
        background-color: #c82333;
    }
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e9ecef;
    }
    .social-links {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }
    .social-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        color: #495057;
        text-decoration: none;
        transition: all 0.2s;
    }
    .social-link:hover {
        background-color: #f8f9fa;
        border-color: #007bff;
        color: #007bff;
    }
    .alert {
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    .security-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .security-item:last-child {
        border-bottom: none;
    }
    .security-item-label {
        font-weight: 600;
        color: #495057;
    }
    .security-item-status {
        color: #6c757d;
    }
    .security-item-status.verified {
        color: #28a745;
    }
    .security-item-status.pending {
        color: #ffc107;
    }
    .security-item-status.required {
        color: #dc3545;
    }
    .preference-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .preference-item:last-child {
        border-bottom: none;
    }
    .preference-item-label {
        font-weight: 600;
        color: #495057;
    }
    .preference-item-description {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
    .switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
    }
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #007bff;
    }
    input:focus + .slider {
        box-shadow: 0 0 1px #007bff;
    }
    input:checked + .slider:before {
        transform: translateX(24px);
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #495057;
        margin-bottom: 1.5rem;
    }
    .card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-user-circle mr-2 text-primary"></i>个人资料
    </h1>
    <p class="text-gray-600">管理您的个人信息和系统设置</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="profile-container">
    <!-- 个人资料头部 -->
    <div class="profile-header">
        <!-- 头像区域 -->
        <div class="profile-avatar">
            <img src="{{ user.avatar_url or 'https://via.placeholder.com/150' }}" alt="用户头像" class="avatar-img">
            <div class="avatar-upload-overlay">
                <i class="fa fa-camera mr-1"></i> 更换头像
                <input type="file" id="avatar-upload-input" class="avatar-upload-input">
            </div>
        </div>
        
        <!-- 用户基本信息 -->
        <div class="profile-info">
            <h2 class="profile-name">{{ user.username }}</h2>
            <p class="profile-email">{{ user.email }}</p>
            
            <!-- 用户统计信息 -->
            <div class="profile-stats">
                <div class="profile-stat">
                    <div class="profile-stat-number">{{ user.courses_count or 0 }}</div>
                    <div class="profile-stat-label">已学课程</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-number">{{ user.activities_count or 0 }}</div>
                    <div class="profile-stat-label">参与活动</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-number">{{ user.resources_count or 0 }}</div>
                    <div class="profile-stat-label">分享资源</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-number">{{ user.friends_count or 0 }}</div>
                    <div class="profile-stat-label">好友</div>
                </div>
            </div>
            
            <!-- 社交链接 -->
            <div class="social-links">
                <a href="#" class="social-link">
                    <i class="fa fa-github"></i>
                    <span>GitHub</span>
                </a>
                <a href="#" class="social-link">
                    <i class="fa fa-linkedin"></i>
                    <span>LinkedIn</span>
                </a>
                <a href="#" class="social-link">
                    <i class="fa fa-wechat"></i>
                    <span>微信</span>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 个人资料导航标签 -->
    <div class="profile-nav">
        <div class="profile-tab active" data-tab="basic-info">基本信息</div>
        <div class="profile-tab" data-tab="education-info">教育信息</div>
        <div class="profile-tab" data-tab="security">安全设置</div>
        <div class="profile-tab" data-tab="preferences">系统偏好</div>
    </div>
    
    <!-- 基本信息内容 -->
    <div id="basic-info" class="profile-content active">
        <h3 class="section-title">基本信息</h3>
        <form id="basic-info-form">
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="full-name" class="form-label">姓名</label>
                        <input type="text" id="full-name" name="full_name" class="form-control" placeholder="请输入您的真实姓名" value="{{ user.full_name or '' }}">
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="nickname" class="form-label">昵称</label>
                        <input type="text" id="nickname" name="nickname" class="form-control" placeholder="请输入您的昵称" value="{{ user.nickname or '' }}">
                    </div>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="gender" class="form-label">性别</label>
                        <select id="gender" name="gender" class="form-control">
                            <option value="">请选择性别</option>
                            <option value="male" {% if user.gender == 'male' %}selected{% endif %}>男</option>
                            <option value="female" {% if user.gender == 'female' %}selected{% endif %}>女</option>
                            <option value="other" {% if user.gender == 'other' %}selected{% endif %}>其他</option>
                        </select>
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="birth-date" class="form-label">出生日期</label>
                        <input type="date" id="birth-date" name="birth_date" class="form-control" value="{{ user.birth_date or '' }}">
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="bio" class="form-label">个人简介</label>
                <textarea id="bio" name="bio" class="form-control" rows="4" placeholder="介绍一下自己吧...">{{ user.bio or '' }}</textarea>
                <small class="form-text">最多500个字符</small>
            </div>
            
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="phone" class="form-label">手机号码</label>
                        <input type="tel" id="phone" name="phone" class="form-control" placeholder="请输入手机号码" value="{{ user.phone or '' }}">
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="wechat" class="form-label">微信</label>
                        <input type="text" id="wechat" name="wechat" class="form-control" placeholder="请输入微信账号" value="{{ user.wechat or '' }}">
                    </div>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="cancel-basic-info">取消</button>
                <button type="submit" class="btn btn-primary" id="save-basic-info">保存更改</button>
            </div>
        </form>
    </div>
    
    <!-- 教育信息内容 -->
    <div id="education-info" class="profile-content">
        <h3 class="section-title">教育信息</h3>
        <form id="education-info-form">
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="school" class="form-label">学校 <span class="text-danger">*</span></label>
                        <input type="text" id="school" name="school" class="form-control" placeholder="请输入学校名称" value="{{ user.school or '' }}" required>
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="faculty" class="form-label">学院 <span class="text-danger">*</span></label>
                        <input type="text" id="faculty" name="faculty" class="form-control" placeholder="请输入学院名称" value="{{ user.faculty or '' }}" required>
                    </div>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="major" class="form-label">专业 <span class="text-danger">*</span></label>
                        <input type="text" id="major" name="major" class="form-control" placeholder="请输入专业名称" value="{{ user.major or '' }}" required>
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="student-id" class="form-label">学号 <span class="text-danger">*</span></label>
                        <input type="text" id="student-id" name="student_id" class="form-control" placeholder="请输入学号" value="{{ user.student_id or '' }}" required>
                    </div>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="education-level" class="form-label">学历层次</label>
                        <select id="education-level" name="education_level" class="form-control">
                            <option value="">请选择学历层次</option>
                            <option value="undergraduate" {% if user.education_level == 'undergraduate' %}selected{% endif %}>本科</option>
                            <option value="master" {% if user.education_level == 'master' %}selected{% endif %}>硕士</option>
                            <option value="phd" {% if user.education_level == 'phd' %}selected{% endif %}>博士</option>
                            <option value="other" {% if user.education_level == 'other' %}selected{% endif %}>其他</option>
                        </select>
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="enrollment-year" class="form-label">入学年份</label>
                        <input type="number" id="enrollment-year" name="enrollment_year" class="form-control" placeholder="请输入入学年份" value="{{ user.enrollment_year or '' }}">
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label for="education-desc" class="form-label">教育经历</label>
                <textarea id="education-desc" name="education_desc" class="form-control" rows="3" placeholder="简要描述您的教育经历">{{ user.education_desc or '' }}</textarea>
            </div>
            
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" id="cancel-education-info">取消</button>
                <button type="submit" class="btn btn-primary" id="save-education-info">保存更改</button>
            </div>
        </form>
    </div>
    
    <!-- 安全设置内容 -->
    <div id="security" class="profile-content">
        <h3 class="section-title">安全设置</h3>
        
        <div class="card">
            <h4 class="card-title">账户安全状态</h4>
            
            <div class="security-item">
                <div>
                    <div class="security-item-label">邮箱验证</div>
                    <div class="security-item-status {% if user.email_verified %}verified{% else %}required{% endif %}">
                        <i class="fa {% if user.email_verified %}fa-check-circle{% else %}fa-exclamation-circle{% endif %} mr-1"></i>
                        {{ '已验证' if user.email_verified else '未验证' }}
                    </div>
                </div>
                <button class="btn btn-outline-primary btn-sm">
                    {% if user.email_verified %}重新验证{% else %}立即验证{% endif %}
                </button>
            </div>
            
            <div class="security-item">
                <div>
                    <div class="security-item-label">手机验证</div>
                    <div class="security-item-status {% if user.phone_verified %}verified{% elif user.phone %}pending{% else %}required{% endif %}">
                        <i class="fa {% if user.phone_verified %}fa-check-circle{% elif user.phone %}fa-clock-o{% else %}fa-exclamation-circle{% endif %} mr-1"></i>
                        {{ '已验证' if user.phone_verified else (user.phone ? '待验证' : '未设置') }}
                    </div>
                </div>
                <button class="btn btn-outline-primary btn-sm">
                    {% if user.phone_verified %}重新验证{% else %}立即验证{% endif %}
                </button>
            </div>
            
            <div class="security-item">
                <div>
                    <div class="security-item-label">登录密码</div>
                    <div class="security-item-status">{{ user.password_strength or '中等' }}</div>
                </div>
                <button class="btn btn-outline-primary btn-sm">修改密码</button>
            </div>
            
            <div class="security-item">
                <div>
                    <div class="security-item-label">两步验证</div>
                    <div class="security-item-status {% if user.two_factor_enabled %}verified{% else %}required{% endif %}">
                        <i class="fa {% if user.two_factor_enabled %}fa-check-circle{% else %}fa-exclamation-circle{% endif %} mr-1"></i>
                        {{ '已启用' if user.two_factor_enabled else '未启用' }}
                    </div>
                </div>
                <button class="btn btn-outline-primary btn-sm">
                    {% if user.two_factor_enabled %}管理{% else %}启用{% endif %}
                </button>
            </div>
        </div>
        
        <div class="card">
            <h4 class="card-title">登录历史</h4>
            <div class="form-actions">
                <button class="btn btn-outline-primary btn-sm">查看完整登录历史</button>
            </div>
        </div>
        
        <div class="card">
            <h4 class="card-title">设备管理</h4>
            <div class="form-actions">
                <button class="btn btn-outline-primary btn-sm">管理已登录设备</button>
                <button class="btn btn-danger btn-sm">登出所有设备</button>
            </div>
        </div>
    </div>
    
    <!-- 系统偏好内容 -->
    <div id="preferences" class="profile-content">
        <h3 class="section-title">系统偏好设置</h3>
        
        <div class="card">
            <h4 class="card-title">通知设置</h4>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">课程提醒</div>
                    <div class="preference-item-description">接收课程开始、作业截止等提醒</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="notify-course" {% if user.notify_course %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">活动通知</div>
                    <div class="preference-item-description">接收活动开始、更新等通知</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="notify-activity" {% if user.notify_activity %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">资源更新</div>
                    <div class="preference-item-description">接收关注的资源更新提醒</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="notify-resource" {% if user.notify_resource %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">社交互动</div>
                    <div class="preference-item-description">接收评论、点赞等社交互动通知</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="notify-social" {% if user.notify_social %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
        </div>
        
        <div class="card">
            <h4 class="card-title">界面设置</h4>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">深色模式</div>
                    <div class="preference-item-description">使用深色主题界面</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="dark-mode" {% if user.dark_mode %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">语言</div>
                </div>
                <select id="language" class="form-control" style="width: auto;">
                    <option value="zh-CN" selected>简体中文</option>
                    <option value="en-US">English (US)</option>
                </select>
            </div>
        </div>
        
        <div class="card">
            <h4 class="card-title">数据与隐私</h4>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">允许他人查看我的资料</div>
                    <div class="preference-item-description">其他用户可以搜索并查看您的公开资料</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="allow-profile-view" {% if user.allow_profile_view %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
            
            <div class="preference-item">
                <div>
                    <div class="preference-item-label">个性化推荐</div>
                    <div class="preference-item-description">根据您的使用习惯推荐内容</div>
                </div>
                <label class="switch">
                    <input type="checkbox" id="personalized-recommendation" {% if user.personalized_recommendation %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="button" class="btn btn-secondary" id="reset-preferences">重置为默认设置</button>
            <button type="button" class="btn btn-primary" id="save-preferences">保存更改</button>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 头像上传功能
    const avatarUploadInput = document.getElementById('avatar-upload-input');
    const avatarImg = document.querySelector('.avatar-img');
    
    avatarUploadInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const file = this.files[0];
            
            // 检查文件大小（5MB）
            const maxSize = 5 * 1024 * 1024;
            if (file.size > maxSize) {
                alert('头像文件大小不能超过5MB');
                this.value = '';
                return;
            }
            
            // 创建文件预览
            const reader = new FileReader();
            reader.onload = function(e) {
                avatarImg.src = e.target.result;
                // 这里可以添加上传头像的AJAX请求
            };
            reader.readAsDataURL(file);
        }
    });
    
    // 标签切换功能
    const profileTabs = document.querySelectorAll('.profile-tab');
    const profileContents = document.querySelectorAll('.profile-content');
    
    profileTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const tabId = this.getAttribute('data-tab');
            
            // 移除所有标签的active类
            profileTabs.forEach(t => t.classList.remove('active'));
            // 添加当前标签的active类
            this.classList.add('active');
            
            // 隐藏所有内容
            profileContents.forEach(content => content.classList.remove('active'));
            // 显示当前内容
            document.getElementById(tabId).classList.add('active');
        });
    });
    
    // 表单提交处理
    const basicInfoForm = document.getElementById('basic-info-form');
    const educationInfoForm = document.getElementById('education-info-form');
    const saveBasicInfoBtn = document.getElementById('save-basic-info');
    const saveEducationInfoBtn = document.getElementById('save-education-info');
    const savePreferencesBtn = document.getElementById('save-preferences');
    const cancelBasicInfoBtn = document.getElementById('cancel-basic-info');
    const cancelEducationInfoBtn = document.getElementById('cancel-education-info');
    const resetPreferencesBtn = document.getElementById('reset-preferences');
    
    // 保存基本信息
    basicInfoForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 验证表单
        const bio = document.getElementById('bio').value;
        if (bio.length > 500) {
            alert('个人简介不能超过500个字符');
            return;
        }
        
        // 显示加载状态
        saveBasicInfoBtn.disabled = true;
        saveBasicInfoBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>保存中...';
        
        // 模拟AJAX请求
        setTimeout(() => {
            // 显示成功消息
            const message = document.createElement('div');
            message.className = 'alert alert-success fade-in';
            message.innerHTML = '<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>基本信息保存成功';
            
            const profileContainer = document.querySelector('.profile-container');
            profileContainer.insertBefore(message, profileContainer.firstChild);
            
            // 恢复按钮状态
            saveBasicInfoBtn.disabled = false;
            saveBasicInfoBtn.innerHTML = '保存更改';
            
            // 3秒后自动关闭消息
            setTimeout(() => {
                message.remove();
            }, 3000);
        }, 1000);
    });
    
    // 取消基本信息编辑
    cancelBasicInfoBtn.addEventListener('click', function() {
        // 这里可以添加重置表单的逻辑
        if (confirm('确定要取消编辑吗？未保存的更改将会丢失。')) {
            // 重置表单
            basicInfoForm.reset();
        }
    });
    
    // 保存教育信息
    educationInfoForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 显示加载状态
        saveEducationInfoBtn.disabled = true;
        saveEducationInfoBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>保存中...';
        
        // 模拟AJAX请求
        setTimeout(() => {
            // 显示成功消息
            const message = document.createElement('div');
            message.className = 'alert alert-success fade-in';
            message.innerHTML = '<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>教育信息保存成功';
            
            const profileContainer = document.querySelector('.profile-container');
            profileContainer.insertBefore(message, profileContainer.firstChild);
            
            // 恢复按钮状态
            saveEducationInfoBtn.disabled = false;
            saveEducationInfoBtn.innerHTML = '保存更改';
            
            // 3秒后自动关闭消息
            setTimeout(() => {
                message.remove();
            }, 3000);
        }, 1000);
    });
    
    // 取消教育信息编辑
    cancelEducationInfoBtn.addEventListener('click', function() {
        if (confirm('确定要取消编辑吗？未保存的更改将会丢失。')) {
            educationInfoForm.reset();
        }
    });
    
    // 保存偏好设置
    savePreferencesBtn.addEventListener('click', function() {
        // 显示加载状态
        this.disabled = true;
        this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>保存中...';
        
        // 模拟AJAX请求
        setTimeout(() => {
            // 显示成功消息
            const message = document.createElement('div');
            message.className = 'alert alert-success fade-in';
            message.innerHTML = '<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>偏好设置保存成功';
            
            const profileContainer = document.querySelector('.profile-container');
            profileContainer.insertBefore(message, profileContainer.firstChild);
            
            // 恢复按钮状态
            this.disabled = false;
            this.innerHTML = '保存更改';
            
            // 3秒后自动关闭消息
            setTimeout(() => {
                message.remove();
            }, 3000);
        }, 800);
    });
    
    // 重置偏好设置
    resetPreferencesBtn.addEventListener('click', function() {
        if (confirm('确定要重置为默认设置吗？这将恢复所有设置为系统默认值。')) {
            // 重置所有开关
            document.querySelectorAll('#preferences .switch input').forEach(input => {
                input.checked = true; // 默认值为开启
            });
            
            // 重置语言
            document.getElementById('language').value = 'zh-CN';
        }
    });
    
    // 深色模式切换
    const darkModeToggle = document.getElementById('dark-mode');
    
    darkModeToggle.addEventListener('change', function() {
        if (this.checked) {
            document.body.classList.add('dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
        }
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        const profileContainer = document.querySelector('.profile-container');
        
        profileContainer.style.opacity = '0';
        profileContainer.style.transform = 'translateY(20px)';
        profileContainer.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            profileContainer.style.opacity = '1';
            profileContainer.style.transform = 'translateY(0)';
        }, 100);
    });
</script>
{% endblock %}